<template>
    <div class="box">
            <figure  v-for="ydxinxi in ydxinxis" :key="ydxinxi.id" >
                 <div class="shang">{{ydxinxi.title}}</div>
                    <div class="zhong">{{ydxinxi.translation}} </div>
                    <div class="xia">
                        <span> {{ydxinxi.address}}</span>
                        <img src="../assets/img/yuedu1.png" alt="">
                    </div>
               
            </figure>


    </div>
</template>
<script>
export default {

    data(){
        return {
     
          ydxinxis:[]
        }
    },
    created(){
        let xhr = new XMLHttpRequest();
        xhr.open("get","http://localhost:3000/ydxinxis",true);
        xhr.onreadystatechange = ()=>{
            // xhr.reayState==4: 表示请求响应的过程完毕。
            // xhr.status==200 ：后端响应了正常的数据（响应没有问题）
            if(xhr.readyState==4 && xhr.status==200){
                console.log("xhr.responseText",xhr.responseText);
                this.ydxinxis = JSON.parse(xhr.responseText);
            }
        }
        xhr.send();
    }    
}
</script>


<style scoped>



 figure{
    display: flex;
    flex-direction: column;
    align-items: left;
    width:3.2rem ;
    border-bottom: 1px solid #f7f7f7;
}
 figure  .shang{ 
    font-size:0.18rem ;
    font-weight: bold;
    margin-top:0.2rem ;

}
 figure  .zhong{ 
    font-size:0.14rem ;
    margin: 0.15rem 0;
  
}
 figure  .xia{ 
    font-size:0.1rem ;
    color: #828282;
    margin-bottom: 0.2rem;
    display: flex;
    justify-content: space-between;
}
 figure  .xia img { 
  width: 0.62rem;
  height: 0.19rem;
}




</style>


